<%-- 
    Document   : clubList
    Created on : 2015-4-28, 16:27:37
    Author     : xulin
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title>官方车友会</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="LiuLong_gz ZhongQingbiao_gz"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/club_brand/brand_wap.css">
    </head>

    <body class="g-doc" id="Jlazy_img">

        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="8231" />
        </jsp:include>

        <!-- 公共头部 -->
        <script class=" defer" src="http://www.pcauto.com.cn/global/wap/1411/intf6047.html" charset="utf-8"></script>
        <nav class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title"><span class="header-title-nav">官方车友会</span></div>
            <!-- <a class="g-hd-btn g-hd-btn-search" href="http://m.pcauto.com.cn/club/select/" id="Jsignbtn"></a> -->
        </nav>
        <div id="tab1" class="tab1">
            <div class="th swipe">
                <a >品牌厂商</a>
                <a>用品/服务</a>
                <a>地区</a>
            </div>
            <div class="tb">
                <!-- 
                tab切换
                按需加载分成两部分 
                    首屏，即第一个默认加载的第一个tab块的src真实地址填在#src，实现延迟加载的效果
                    其他切换块的图片真实地址则填在src2里，实现切换tab的时候才加载。
                    ajax请求回来的数据新拼成<li></li>,即对于每个tab块,每个li是一个数据块。新的ul里的图片的路径直接放在src里面
                  -->
                <div class="con-wrap">
                        <div class="content">
                            <ul class="li-wrap" id="brandList">
                                <c:forEach items="${pager.resultList}" var="oClub">
                                <!-- 真实地址输出在#src里 src为占位图 -->
                                <li class="item">
                                    <a href="${OCLUBWAPROOT}/${oClub.url}" title="">
                                        <img class="pic" src="http://www1.pcauto.com.cn/images/holder.png" #src="${oClub.logo150x150}" alt="">
                                        <div class="title">
                                            <h3 class="addV">${fn:escapeXml(oClub.name)}</h3>
                                            <em class="num">${oClub.memberNum}</em>
                                        </div>
                                            <p>${fn:escapeXml(oClub.introduce)}</p>
                                    </a>
                                </li>
                                </c:forEach>
                            </ul>
                            <c:if test="${pager.pageNo < pager.pageCount}">
                                <a href="javascript:;" id="J-loadBrandMore" class="loadmore"><i>点击加载更多</i></a>
                            </c:if>
                        </div>
                    <div class="content">
                        <ul class="li-wrap" id="serviceList">
                        </ul>
                        <a href="javascript:;" id="J-loadServiceMore" class="loadmore"><i>点击加载更多</i></a>
                    </div>
                    <div class="content">
                        <ul class="li-wrap" id="areaList">
                        </ul>
                        <a href="javascript:;" id="J-loadAreaMore" class="loadmore"><i>点击加载更多</i></a>

                    </div>
                </div>
            </div>
        </div>


        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
            <script src="http://www.pcauto.com.cn/global/wap/1411/intf6027.html" charset="utf-8"></script>
        </div>
        <script type="text/javascript" src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
        <script src="http://js.3conline.com/wap/common/swipe.extend-min.js" charset="utf-8"></script>
        <script src="http://js.3conline.com/wap/common/wap.lazy-min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var brandType = 1 ; //品牌类型
            var serviceType = 2; //服务类型
            var areaType = 4; //地区类型
            var brandPageNo = "${pager.pageNo}";
            var servicePageNo = 0;
            var areaPageNo = 0;
            var pageSize = 10;
            var isLoadService = false;
            var isLoadArea = false;
            var isSwipe = false;
            var loadDataUrl = "${OCLUBWAPROOT}/club/loadClubList.do";
            var clubHtml = '<li class="item"><a href="${OCLUBWAPROOT}/{url}" title=""><img class="pic" src="http://www1.pcauto.com.cn/images/holder.png" #src="{logo}"  alt="">'
                           +'<div class="title"><h3 class="addV">{name}</h3><em class="num">{memberNum}</em></div><p>{introduce}</p></a></li> ';

            //切换tab
            function swipeTabA(ele) {
                var wrap = ele.querySelector("div.tb"),
                nav = ele.querySelector(".swipe");
                swipe(wrap, {
                    speed: 300,
                    nav: nav,
                    callback: function(index, elem) {
                        elem.parentNode.style.height = (elem.clientHeight||elem.offsetHeight) + "px";
                         if(index==1){
                            if(!isLoadService){
                                var ele = $('#J-loadServiceMore');
                                loadMoreClass(ele,loadServiceData);
                            }
                        }else if(index==2){
                            if(!isLoadArea){
                                var ele = $('#J-loadAreaMore');
                                loadMoreClass(ele,loadAreaData);
                            }
                        }
                    }
                });
            }
            // 按需加载
            function lazyfun(){
                var xx = Lazy.create({
                    lazyId: "Jlazy_img",
                    trueSrc: '#src',
                    offset: 300, //灵敏度。如设置为100，表示滚动在距离目标位置100px执行，默认为半屏高度
                    delay: 100, //该毫秒时间内触发则延时100毫秒再加载
                    delay_tot: 1000 //滚动过程中多长时间后强行触发一次，默认值是 1000，单位毫秒
                });
                Lazy.init(xx);
            }
            lazyfun();

            $('#J-loadBrandMore').click(function(event){
                loadMoreClass($(this),loadBrandData);
            });
            $('#J-loadServiceMore').click(function(event){
                loadMoreClass($(this),loadServiceData);
            });
            $('#J-loadAreaMore').click(function(event){
                loadMoreClass($(this),loadAreaData);
            });
            function loadMoreClass(event,callFunction){
                var ele = $(event).find('i');
                // 先判断是不是在加载状态,若是初次点击 则给予loading动画，并在此处处理ajax，屏蔽掉多次点击
                // 加载成功后去掉class loading
                if(!ele.hasClass('loading')){
                    setLoading(ele);
                    callFunction();
                }
            }
            function setLoading(ele){
                // load动画
                    ele.attr('data-txt',ele.html());
                    ele.html('');
                    ele.addClass('loading');
                    $('.con-wrap').css('height','auto');
            }
            function setContentHeight(e){
                var ele = e.find("i");
                  // 先写为auto
            //    
                // 算新的height 赋给包裹层.con-wrap
                var curHeight = e.parent().height();
                $('.con-wrap').height(curHeight);
                ele.html(ele.attr("data-txt"));
                ele.removeClass("loading");
            }
           function template(data){
                    var html = "";
                    if(data){
                     var len = data.length;
                     for(var i = 0; i < len ; i++){
                         var result = data[i];
                         html+=clubHtml.replace(/{url}/ig,result.url).replace(/{name}/ig,result.name).replace(/{logo}/ig,result.logo150x150)
                                        .replace(/{memberNum}/ig,result.memberNum).replace(/{introduce}/ig,result.introduce);
                     }
                   }
                   return html;
           }
            function loadData(type,pageNo,pageSize,callback){
                $.getJSON(loadDataUrl,{type:type,pageNo:pageNo,pageSize:pageSize},function(data){
                    if(callback){
                        callback(data);
                    }
                })
            }
            /**
             * 加载品牌列表
             */
            function loadBrandData(){
                loadData(brandType,++brandPageNo,pageSize,loadBrandCallback);
            }
            function loadBrandCallback(data){
             if(data.code == 0){
                 if(data.data){
                     var html = template(data.data);
                     $("#brandList").append(html);
                 }
                 if(brandPageNo == data.pageCount){
                     $("#J-loadBrandMore").hide();
                 }
                 setContentHeight($("#J-loadBrandMore"));
                 lazyfun();
             }
         }
         /**
          * 加载用品服务列表
          */
         function loadServiceData(){
             loadData(serviceType,++servicePageNo,pageSize,loadServiceCallback);
         }
         function loadServiceCallback(data){
             isLoadService = true;
              if(data.code == 0){
                 if(data.data){
                     var html = template(data.data);
                     $("#serviceList").append(html);
                 }
                 if(servicePageNo == data.pageCount){
                     $("#J-loadServiceMore").hide();
                 }
                setContentHeight($("#J-loadServiceMore"));
                 lazyfun();
             }
         }
         /**
          * 加载地区列表
          */
         function loadAreaData(){
             loadData(areaType,++areaPageNo,pageSize,loadAreaCallback);
         }
         function loadAreaCallback(data){
             isLoadArea = true;
              if(data.code == 0){
                 if(data.data){
                     var html = template(data.data);
                     $("#areaList").append(html);
                 }
                 if(areaPageNo == data.pageCount){
                     $("#J-loadAreaMore").hide();
                 }
                setContentHeight($("#J-loadAreaMore"));
                 lazyfun();
             }
         }
         swipeTabA(document.getElementById("tab1"));
        </script>

    </body>
</html>